<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>监听属性</span>
        <el-button
          @click="openListenerDrawer('创建')"
          style="float: right; padding: 3px 0"
          type="text"
          >创建</el-button
        >

        <el-table :data="ownerListenersList" style="width: 100%">
        <el-table-column prop="event" label="事件"> </el-table-column>
        <el-table-column prop="listenerType" label="监听器">
          <template slot-scope="scope">
            {{listenerTypes.find((item) => item.value == scope.row.listenerType).name}}
          </template>
        </el-table-column>
        <el-table-column prop="value" label="配置">
          <template slot-scope="scope">
            {{scope.row[scope.row.listenerType]}}
          </template>
        </el-table-column>

        <!-- <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="showModal('编辑', scope.row, scope.$index)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="deleteListener(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      </div>
    </el-card>

    <el-dialog
      :title="listenerTitle"
      :visible.sync="visible"
      width="30%"
      :before-close="closeAndReset"
      append-to-body
    >
      <el-form label-width="80px" ref="listenerForm" :model="listenerForm" :rules="rules">
        <el-form-item label="事件类型" prop="event">
          <el-select
            v-model="listenerForm.event"
            placeholder="请选择类型"
            clearable
            filterable
            @input="input"
            @change="change"
          >
            <el-option
              v-for="(item, index) in events"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="监听器类型" prop="listenerType">
          <el-select
            v-model="listenerForm.listenerType"
            placeholder="请选择类型"
            clearable
            filterable
            @input="input"
            @change="change"
          >
            <el-option
              v-for="(item, index) in listenerTypes"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="配置" prop="class" v-if="listenerForm.listenerType == 'class'">
          <el-input v-model="listenerForm.class"></el-input>
        </el-form-item>

        <el-form-item label="配置" prop="expression" v-if="listenerForm.listenerType == 'expression'">
          <el-input v-model="listenerForm.expression"></el-input>
        </el-form-item>

        <el-form-item label="配置" prop="delegateExpression" v-if="listenerForm.listenerType == 'delegateExpression'">
          <el-input v-model="listenerForm.delegateExpression"></el-input>
        </el-form-item>


        <el-form-item label="脚本" prop="script" v-if="listenerForm.listenerType == 'script'">
          <el-input v-model="listenerForm.script"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="mini" @click="setField">成员变量</el-button>
        </el-form-item>


      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAndReset">取 消</el-button>
        <el-button type="primary" @click="saveListener">确 定</el-button>
      </span>
    </el-dialog>

    <Field v-if="showField" @save-fields="saveFields" />
  </div>
</template>

<script>
import { EVENTS_EXECUTION, LISTENER_TYPES, SCRIPT_TYPES } from "./constants";
import Field from './Field.vue';

export default {
  components: {
    Field
  },

  props: ['modeler'],

  data() {
    return {
      events: EVENTS_EXECUTION,
      listenerTypes: LISTENER_TYPES,
      scriptTypes: SCRIPT_TYPES,
      showField: false,
      currentRow: null,

      prefix: "camunda",
      noData: { emptyText: "暂无监听" },
      elementType: "",
      listenerTypeTitle: "Java类",
      listenerTitle: "",
      listenerIndex: -1,
      size: "small",
      ownerListenersList: [],
      ownerListenersObjectList: [],
      visible: false,
      listenerForm: {},
      rules: {
        event: [
          { required: true, message: "事件类型不能为空", trigger: "blur" },
        ],
        listenerType: [
          { required: true, message: "监听器类型不能为空", trigger: "blur" },
        ],
        class: [{ required: true, message: "Java不能为空" }],
        expression: [{ required: true, message: "表达式不能为空" }],
        delegateExpression: [
          { required: true, message: "代理表达式不能为空" },
        ],

        script: [
          { required: true, message: "脚本不能为空" },
        ],
      },
    };
  },

  methods: {
    openListenerDrawer(type, data, index) {
      if (type == "创建") {
        this.listenerTitle = "创建执行监听";
      }

      this.visible = true;
    },

    setField() {
      this.showField = true
    },

    input() {

    },

    change() {

    },

    saveListener() {
      this.$refs.listenerForm.validate((valid) => {
        if (valid) {
          // 组装数据
          const listenerObj = this.initListenerObject(this.listenerForm)
          // this.moddle = this.modeler.get('moddle')
          // const listenerModel = this.moddle.create(`${this.prefix}:ExecutionListener`, listenerObj)

          // 插入
          if (this.listenerIndex === -1) {
            this.ownerListenersObjectList.push(listenerObj)
            this.ownerListenersList.push(this.listenerForm)
          } 
          // else {
          //   this.ownerListenersObjectList.splice(this.listenerIndex, 1, listenerModel)
          //   this.ownerListenersList.push(this.listenerIndex, 1, this.listenerForm)
          // }
          // 更新
          // this.$emit('saved', this.listenerForm)
          console.log(this.listenerForm)
          this.$emit('change', this.listenerForm)
          this.$message.success('新增成功')
          this.closeAndReset()
        }
      })
    },

    initListenerObject(options) {
      const listenerObj = {
        event: options.event,
        [options.listenerType]: options[options.listenerType],
        listenerType: options.listenerType
      }
      return listenerObj
    },

    closeAndReset() {
      this.visible = false
      this.listenerForm = {}
    },

    saveFields(fields) {
      this.listenerForm.fields = fields
    }
  },
};
</script>
